<template>
	<view>
		<Navgator ></Navgator>
		<view class="main">
			<h4>确认助记词</h4>
			<label class="tip">请按照顺序点击助记词，以确认您正确备份</label>
			<view class="showView">
				<view class="showItem" v-for="(item,i) in showList" @click="showItemClick(item.name,i)">{{item.name}}
				</view>
			</view>
			<view class="selecteView">
				<view :class=" item.select == false? 'listItem' : 'listItemChecked'" v-for="(item,i) in selectList"
					@click="itemCLick(i)">{{item.name}}</view>
			</view>

			<view class="next" :style="`background-color: ${btncolor};`" @click="next">下一步</view>
		</view>
	</view>
</template>

<script>
	import Navgator from '../../componts/navgator.vue'
	export default {
		components: {
			Navgator
		},
		data() {
			return {
				wordList: ['fort', 'command', 'stream', 'umvunga', 'attack', 'trooper', 'asking', 'drift', 'poison',
					'remaiend', 'talking', 'crushed'
				],
				showList: [],
				selectList: [
				],
				btncolor: '#B2BABD'
			}
		},
		onLoad(){
			this.getSelectList()
		},
		methods: {
			itemCLick(index) {
				//添加显示item并改变样式
				this.selectList[index].select = true;
				this.showList.push(this.selectList[index])
			},
			showItemClick(name, i) {
				//删除显示item 并 恢复选择item样式
				this.showList.splice(i, 1)
				let index = this.selectList.findIndex(item => item.name === name)
				this.selectList[index].select = false
			},
			next()
			{
				setTimeout(() => { 
					this.Api.toast("success")
					this.Api.tab_to('/pages/wallet/wallet')
				}, 400)
			},
			getSelectList(){
				let list = JSON.parse(JSON.stringify(this.wordList))
				let tempList =list.sort(()=>this.randomSort())
				
				for(let item of tempList)
				{
					let obj ={
						name:item,
						select:false
					}
					this.selectList.push(obj)
				}
			},
			randomSort(){
				return Math.random() > 0.5 ? -1 : 1;
			}
		},
		watch: {
			showList: {
				handler: function(val, oldVal) {
					if (val.length == 12) {
						this.btncolor = "#1277DF"
					} else {
						this.btncolor = "#B2BABD"
					}
				},
				deep: true
			}
		}
	}
</script>

<style scoped>
	.main {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.tip {
		margin-top: 10rpx;
		color: #636376;
		font-size: 18rpx;
	}

	.showView {
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx;
		box-sizing: border-box;
		background-color: #F4F5F9;
		min-height: 200rpx;
	}

	.selecteView {
		width: 100%;
		display: flex;

		flex-wrap: wrap;
		box-sizing: border-box;
		margin-top: 40rpx;
	}

	.listItem {
		height: 40rpx;
		padding: 10rpx 20rpx;
		font-size: 25rpx;
		font-weight: 600;
		display: flex;
		color: #6C6C6C;
		border-radius: 10rpx;
		align-items: center;
		justify-content: center;
		margin: 10rpx 20rpx;
		border: 1rpx #F1F2F7 solid;
	}

	.listItemChecked {
		height: 40rpx;
		padding: 10rpx 20rpx;
		font-size: 25rpx;
		font-weight: 600;
		display: flex;
		color: #E1E6EB;
		border-radius: 10rpx;
		align-items: center;
		justify-content: center;
		margin: 10rpx 20rpx;
		border: 1rpx #E1E6EB solid;
	}

	.showItem {
		height: 40rpx;
		padding: 10rpx 20rpx;
		font-size: 25rpx;
		font-weight: 600;
		display: flex;
		color: #6C6C6C;
		border-radius: 10rpx;
		align-items: center;
		justify-content: center;
		margin: 10rpx 20rpx;
		background-color: white;

	}

	.next {
		width: 90%;
		position: fixed;
		height: 80rpx;
		line-height: 80rpx;

		text-align: center;
		color: white;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30rpx;
		border-radius: 0;
	}
</style>
